import "./App.css";
import {
  Avatar,
  Breadcrumb,
  Button,
  Dropdown,
  Flex,
  Layout,
  Menu,
  MenuProps,
  Space,
  theme,
} from "antd";
import { Link, Outlet, useNavigate } from "react-router";
import { BreadcrumbItemType } from "antd/es/breadcrumb/Breadcrumb";
import { useState } from "react";
import {
  BellOutlined,
  HomeOutlined,
  InboxOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  SunOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { ItemType, MenuItemType } from "antd/es/menu/interface";

const { Header, Sider } = Layout;

const items: ItemType[] = [
  { label: "概览", icon: <HomeOutlined />, key: "dashboard" },
  {
    label: "人员管理",
    key: "user-submenu",
    type: "submenu",
    icon: <TeamOutlined />,
    children: [
      { label: "用户管理", key: "user" },
      { label: "职位管理", key: "role" },
      { label: "部门管理", key: "test1", disabled: true },
    ],
  },
  {
    label: "商品管理",
    key: "inventory-submenu",
    type: "submenu",
    icon: <InboxOutlined />,
    children: [
      { label: "商品库存", key: "inventory" },
      { label: "仓库管理", key: "warehouse" },
      { label: "分类管理", key: "category" },
      { label: "出入库", key: "bound-detail", disabled: true },
    ],
  },
  {
    label: "系统管理",
    key: "test",
    icon: <SettingOutlined />,
    children: [{ label: "菜单管理", key: "menu" }],
    disabled: true,
  },
];

const avatarMenuProps: MenuProps = {
  items: [
    {
      label: "个人信息",
      key: "account",
      icon: <UserOutlined />,
      onClick: () => {
        navigate("./account");
        setSelectedKeys([]);
      },
    },
    { label: "退出系统", key: "tt" },
  ],
};

// 初始化面包屑
let breadcrumbItems: BreadcrumbItemType[] = [];

export default function App() {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const [openSider, setOpenSider] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState([""]);

  const menuClick = ({ key, keyPath }) => {
    // 导航
    if (key != null) {
      navigate(`/${key}`);
      setSelectedKeys([key]);
    }
    // 面包屑路径
    const paths: BreadcrumbItemType[] = [];
    // 要匹配的路径
    let crtKeyPath = keyPath.pop();

    // 查找的数组
    let crtItems = items;
    while (crtKeyPath) {
      let path = crtItems.find((item) => item?.key === crtKeyPath);
      console.log("path", path);
      if (!path) {
        break;
      }
      if ("children" in path && path.children) {
        crtItems = path.children;
      }
      path = path as MenuItemType;
      paths.push({ title: path.label, path: `/${path.key}` });
      crtKeyPath = keyPath.pop();
    }
    breadcrumbItems = paths;
  };

  return (
    <Layout>
      <Sider
        theme="dark"
        collapsed={openSider}
        collapsible={true}
        trigger={null}
        style={{
          height: "100vh",
          position: "sticky",
          top: 0,
          bottom: 0,
          left: 0,
        }}>
        <Flex vertical gap="small" style={{ height: "100%", width: "100%" }}>
          <div style={{ textAlign: "center", padding: "10px" }}></div>
          <Menu
            mode="inline"
            items={items}
            selectedKeys={selectedKeys}
            style={{ flexGrow: 1, borderInlineEnd: "none" }}
            theme="dark"
            defaultOpenKeys={["user-submenu", "inventory-submenu"]}
            onSelect={menuClick}
          />
        </Flex>
      </Sider>
      <Layout style={{ flexGrow: 1 }}>
        <Header
          style={{
            display: "flex",
            backgroundColor: colorBgContainer,
            alignItems: "center",
            columnGap: "0.5rem",
            padding: "0 2rem 0 10px",
          }}>
          <Space style={{ flexGrow: 1 }}>
            <Button
              icon={openSider ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setOpenSider(!openSider)}
            />
            <Breadcrumb
              items={breadcrumbItems}
              itemRender={(currentRoute, params, items, paths) => {
                console.log(currentRoute, params, items, paths);
                const isLast =
                  currentRoute?.path === items[items.length - 1]?.path;

                return isLast ? (
                  <span>{currentRoute.title}</span>
                ) : (
                  <Link to={`/${paths.join("/")}`}>{currentRoute.title}</Link>
                );
              }}
            />
          </Space>
          <Button shape="circle" ghost type="text" size="large">
            <SunOutlined />
          </Button>
          <Button
            icon={<BellOutlined />}
            shape="circle"
            type="text"
            size="large"></Button>
          <Dropdown menu={avatarMenuProps}>
            <Button shape={openSider ? "circle" : "default"} type="text">
              <>
                <Avatar
                  size="small"
                  src="https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg"
                />
                {openSider ? "" : "用户名"}
              </>
            </Button>
          </Dropdown>
        </Header>
        <Outlet />
      </Layout>
    </Layout>
  );
}
